<template>
    <div class="orderList">
        <h1>床位列表</h1>
        <el-table

        max-height="600px"
      :data="tableData"
      style="width: 80%;margin:auto;">
      <el-table-column
      type="selection"
      width="55">
    </el-table-column>
      <el-table-column
        prop="id"
        label="床位id"
        width="auto">
      </el-table-column>
      <el-table-column
        prop="building_id"
        label="宿舍楼id"
        width="auto">
      </el-table-column>
      <el-table-column
        prop="room_id"
        label="房间id"
        width="auto">
      </el-table-column>
      <el-table-column
        prop="bed_number"
        label="床位编号"
        width="auto">
      </el-table-column>
      <!-- <el-table-column
        prop="id"
        label="分配情况"
        width="auto">
      </el-table-column> -->
      <el-table-column
        prop="status"
        fixed="right"
        label="状态"
        width="auto">
        <template slot-scope="scope">
         {{ getStatus(scope.row) }}

        </template>
   
      </el-table-column>
      
        <el-table-column
        
      fixed="right"
      label="操作"
      width="auto">
      <template slot-scope="scope">
        <el-switch
        class="switchStyle"
        active-text="启用"
       inactive-text="禁用"
       :value="scope.row.status"
      :disabled="scope.row.status==2"

  :active-value="1"

  
  @change="changeValid(scope.row)" 
>

</el-switch>
      </template>
    </el-table-column>
    </el-table>
    </div>

  </template>

  <script>
// import  {getOrderByUID} from '@/api/order.js'
import  {getAllBeds,updateBedStatus} from '@/api/room.js'
// import RoomDetail from '@/views/RoomDetail.vue'
    export default {
        components:{
            // RoomDetail
        },
      data() {
        return {
          tableData: [],
          popupVisible: false,
       
         chosenRoom:{},
         
          
        }},
        mounted(){
            this.do_getAllBeds();
        },
        methods:{
            do_getAllBeds(){
                getAllBeds().then(res=>{
                if(res.code==200){
                    this.tableData=res.data;
                    }
                // else this.$message.error(res.message)
                
                }).catch(()=>{

                })},


                
                statusConvert(value){
            if(value===0)
                return "未开始";
            if(value===1) 
                return "进行中"
            else return "已结束"
        },

      changeValid(row){
      var change="";
      switch(row.status){
        case 0:
          change="启用";
          break;
        default:
          change="禁用"
      }
       this.$confirm('确定'+change+'床位吗？', '提示').then(() => {
        row.status=row.status==1? 0:1
        // alert(row.id)
      updateBedStatus(row.id,row.status).then(res=>{
      
        if(res.code===200)
            this.$message.success(res.msg)
        else this.$message.error(res.msg)
      })
    }).catch(() => {

    });
  },
  getStatus(row){
    switch(row.status){
      case 0:
       return  "禁用中";
      
      case 1:
      return "启用中";
      
      case 2:
      return "已分配";
      
      }

  }



    }
      }
      
  </script>

  <style>
.orderList{
    justify-content: center;
}

.switchStyle .el-switch__label {
  position: absolute;
  display: none;
  color: #fff;
  
}
.switchStyle .el-switch__label--left {
  z-index: 9;
  left: 19px;
  /* right: -3px; */
}
.switchStyle .el-switch__label--right {
  z-index: 9;
  left: -3px;
  font-size: 5px;
}
.switchStyle .el-switch__label.is-active {
  display: block;
}
.switchStyle.el-switch .el-switch__core,
.el-switch .el-switch__label {
  width: 50px !important;
}
</style>